<template>
  <!-- @openChange="onChangePopover" -->
  <a-popover
    v-model:open="open"
    placement="bottomLeft"
    :align="{ offset: [0, -1] }"
    trigger="click"
    class="rounded-lg overflow-hidden"
    overlay-class-name="w-[620px] z-10 shadow-2xl "
  >
    <template #content>
      <div :id="`patient-popover-${patientInfo.inplsh}`" class="bg-primary text-white px-4 py-2 flex">
        <div class="w-5/6">
          <div class="flex justify-between">
            <div class="w-28 flex justify-between">
              <p class="flex items-center">
                <img v-if="filesInfo?.brXb === '男'" class="w-[16px] h-[16px] mr-2" src="@/assets/images/icon-man.png" />
                <img v-if="filesInfo?.brXb === '女'" class="w-[16px] h-[16px] mr-2" src="@/assets/images/icon-woman.png" />
                <span>{{ filesInfo?.brXb || '-' }}</span>
              </p>
              <span v-if="filesInfo.brAge">{{ filesInfo.brAge }}</span>
              <span v-else>{{ filesInfo.brxx?.brAge || '-' }}</span>
            </div>
            <div class="flex-1 flex ml-16">
              <p class="flex items-center">
                <img class="w-[15px] h-[15px] mr-1" src="@/assets/images/icon-rh.png" />
                <span>{{ filesInfo?.brxx?.brXx || '-' }}</span>
              </p>
              <span class="ml-8">{{ filesInfo?.brxx?.rhxx }}</span>
              <span class="ml-8">{{ filesInfo?.brxx?.brMz }}</span>
              <span class="ml-8">{{ filesInfo?.brxx?.brHf }}</span>
            </div>
          </div>
          <div class="flex mt-1">
            <div class="w-28 flex items-center">
              <img class="w-[13px] h-[13px] mr-2" src="@/assets/images/icon-phone.png" />
              <span>{{ filesInfo?.brxx?.brMob || '电话' }}</span>
            </div>
            <span class="ml-16">{{ filesInfo?.brxx?.provincesCityDistrict }} {{ filesInfo?.brxx?.brJtdz }}</span>
          </div>
        </div>
        <div class="flex-1 flex justify-end items-center">
          <img class="cursor-pointer -mt-8" src="@/assets/images/icon-edit.png" alt="" @click="onEditInfo" />
        </div>
      </div>
      <div class="mt-2 pb-4">
        <div class="flex justify-between">
          <BaseTitle title="住院信息" />
          <div class="w-[80px] flex cursor-pointer" @click="onActive">
            <a-button type="link" class="p-0"><EditOutlined />{{ putStateInfo ? '修改' : '保存' }}</a-button>
          </div>
        </div>
        <div class="info-box">
          <div class="info">
            <div class="w-[100px]">住院病区：</div>
            <LabelValue :width="160" :value="filesInfo.wardName" />
            <!-- <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.wardName" />
            <SelectArea v-else class="w-[160px]" :value="filesInfo.lastWardId" use-cache set-cache @change="onChangeArea" /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">住院科室：</div>
            <LabelValue :width="160" :value="filesInfo.ksmc" />
            <!-- <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.ksmc" />
            <a-input v-else v-model:value="filesInfo.ksmc" class="w-[160px]" placeholder="请输入" /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">入院时间：</div>
            <LabelValue :width="160" :value="filesInfo.admissionTime" />
            <!-- <a-date-picker v-if="putStateInfo" v-else v-model:value="filesInfo.admissionTime" class="w-[160px]" show-time placeholder="请选择" value-format="YYYY-MM-DD hh:mm:ss" /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">住院号：</div>
            <LabelValue :width="160" :value="filesInfo.admissionCode" />
            <!-- <a-input v-if="putStateInfo"  v-else v-model:value="filesInfo.admissionCode" class="w-[160px]" placeholder="请输入" /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">入区时间：</div>
            <LabelValue :width="160" :value="filesInfo.lastDeptRegTime" />
            <!-- <a-date-picker
             v-if="putStateInfo"
              v-else
              v-model:value="filesInfo.lastDeptRegTime"
              class="w-[160px]"
              show-time
              placeholder="请选择"
              value-format="YYYY-MM-DD hh:mm:ss"
            /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">出区时间：</div>
            <LabelValue :width="160" :value="filesInfo.cqsj" />
            <!-- <a-date-picker v-if="putStateInfo" v-else v-model:value="filesInfo.cqsj" class="w-[160px]" show-time placeholder="请选择" value-format="YYYY-MM-DD hh:mm:ss" /> -->
          </div>
          <div class="info">
            <div class="w-[100px]">护理组：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.nurseLevelName" />
            <SelectTable v-else v-model:value="filesInfo.nurseLevelName" class="w-[160px]" type="护士" @select="onSelect($event, 'nurseLevel')" />
          </div>
          <div class="info">
            <div class="w-[100px]">医疗组：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.oprEmpName" />
            <SelectTable v-else v-model:value="filesInfo.oprEmpName" class="w-[160px]" type="护士" @select="onSelect($event, 'oprEmp')" />
          </div>
          <div class="info">
            <div class="w-[100px]">责任护士：</div>
            <template v-if="isModify">
              <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastDutyNurseName" />
              <SelectTable v-else v-model:value="filesInfo.lastDutyNurseName" class="w-[160px]" type="护士" @select="onSelect($event, 'lastDutyNurse')" />
            </template>
            <LabelValue v-else :width="160" :value="filesInfo.lastDutyNurseName" />
          </div>
          <div class="info">
            <div class="w-[100px]">质控护士：</div>
            <template v-if="isModify">
              <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastQcNurseName" />
              <SelectTable v-else v-model:value="filesInfo.lastQcNurseName" class="w-[160px]" type="护士" @select="onSelect($event, 'lastQcNurse')" />
            </template>
            <LabelValue v-else :width="160" :value="filesInfo.lastQcNurseName" />
          </div>
          <div class="info">
            <div class="w-[100px]">护士长：</div>
            <template v-if="isModify">
              <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastHeadNurseName" />
              <SelectTable v-else v-model:value="filesInfo.lastHeadNurseName" class="w-[160px]" type="护士" @select="onSelect($event, 'lastHeadNurse')" />
            </template>
            <LabelValue v-else :width="160" :value="filesInfo.lastHeadNurseName" />
          </div>
          <div class="info">
            <div class="w-[100px]">主任医生：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastDirectorDoctorName" />
            <SelectTable
              v-else
              v-model:value="filesInfo.lastDirectorDoctorName"
              class="w-[160px]"
              type="医生"
              @select="onSelect($event, 'lastDirectorDoctor')"
            />
          </div>
          <div class="info">
            <div class="w-[100px]">住院医生：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastInpDoctorName" />
            <SelectTable v-else v-model:value="filesInfo.lastInpDoctorName" class="w-[160px]" type="医生" @select="onSelect($event, 'lastInpDoctor')" />
          </div>
          <div class="info">
            <div class="w-[100px]">主治医生：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastAttendingDoctorName" />
            <SelectTable
              v-else
              v-model:value="filesInfo.lastAttendingDoctorName"
              class="w-[160px]"
              type="医生"
              @select="onSelect($event, 'lastAttendingDoctor')"
            />
          </div>
          <div class="info">
            <div class="w-[100px]">主任(副)医生：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastDirectorDoctorName" />
            <SelectTable
              v-else
              v-model:value="filesInfo.lastDirectorDoctorName"
              class="w-[160px]"
              type="医生"
              @select="onSelect($event, 'lastDirectorDoctor')"
            />
          </div>
          <div class="info">
            <div class="w-[100px]">科主任：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.lastDeptDirectorName" />
            <SelectTable v-else v-model:value="filesInfo.lastDeptDirectorName" class="w-[160px]" type="医生" @select="onSelect($event, 'lastDeptDirector')" />
          </div>
          <!-- <div class="info">
              <div class="w-[100px]">专科医生：</div>
              <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.zkys" />
              <SelectTable v-else v-model:value="filesInfo.zkys" class="w-[160px]" type="医生" @select="onSelect($event, 'zkys')" />
            </div>
            <div class="info">
              <div class="w-[100px]">培训医生：</div>
              <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.pxys" />
              <SelectTable v-else v-model:value="filesInfo.pxys" class="w-[160px]" type="医生" @select="onSelect($event, 'pxys')" />
            </div> -->
          <div class="info">
            <div class="w-[100px]">部位：</div>
            <LabelValue v-if="putStateInfo" :width="160" :value="filesInfo.bws" />
            <a-select
              v-else
              v-model:value="filesInfo.bw"
              placeholder="请选择"
              mode="multiple"
              class="w-[160px]"
              :max-tag-count="1"
              :options="positionList"
              allow-clear
            />
          </div>
        </div>
        <!-- 健康状态 -->
        <!-- <div class="flex justify-between">
            <BaseTitle title="健康状况" />
            <div class="w-[80px] flex cursor-pointer" @click="onActiveBody">
              <a-button type="link" class="p-0"><EditOutlined />{{ putStateInfoBody ? '修改' : '保存' }}</a-button>
            </div>
          </div>
          <div class="info-box">
            <div class="info">
              <div class="w-[50px]">身高</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.height) + 'cm'" />
              <a-input v-else v-model:value="filesInfo.height" v-input:float class="w-[200px]" placeholder="请输入" suffix="cm" />
            </div>
            <div class="info">
              <div class="w-[50px]">体重</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.weight) + 'kg'" />
              <a-input v-else v-model:value="filesInfo.weight" v-input:float class="w-[200px]" placeholder="请输入" suffix="kg" />
            </div>
            <div class="info">
              <div class="w-[50px]">血压</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.dbp) + '/' + formatNum(filesInfo.sbp) + 'mmHg'" />
              <div v-else class="flex w-[200px]">
                <a-input v-model:value="filesInfo.dbp" placeholder="舒张压" class="flex-1" />
                <div class="mx-2 text-center">/</div>
                <a-input v-model:value="filesInfo.sbp" placeholder="收缩压" class="flex-1" suffix="mmHg" />
              </div>
            </div>
            <div class="info">
              <div class="w-[50px]">呼吸</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.brt1) + '次/分'" />
              <a-input v-else v-model:value="filesInfo.brt1" class="w-[200px]" placeholder="请输入" suffix="次/分" />
            </div>
            <div class="info">
              <div class="w-[50px]">脉搏</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.pul1) + '次/分'" />
              <a-input v-else v-model:value="filesInfo.pul1" class="w-[200px]" placeholder="请输入" suffix="次/分" />
            </div>
            <div class="info">
              <div class="w-[50px]">体温</div>
              <LabelValue v-if="putStateInfoBody" :width="160" :value="formatNum(filesInfo.tpr1) + '℃'" />
              <a-input v-else v-model:value="filesInfo.tpr1" class="w-[200px]" placeholder="请输入" suffix="℃" />
            </div>
          </div> -->
        <div>
          <div>
            <div class="flex justify-between">
              <BaseTitle title="过敏信息" />
              <div class="w-[80px] flex cursor-pointer" @click="onActiveAllergy">
                <a-button type="link" class="p-0"><EditOutlined />{{ putStateAllergy ? '修改' : '保存' }}</a-button>
              </div>
            </div>
          </div>
          <div>
            <div v-if="putStateAllergy" class="p-2">{{ formatGms(filesInfo.patientAllergys, filesInfo.brGms) || '-' }}</div>
            <div v-else class="p-1">
              <SelectAllergyModal
                v-model:value="filesInfo.brGms"
                :br-id="patientInfo.brId"
                :source-data="filesInfo.patientAllergys"
                :get-container="getContainer"
                @success="filesInfo.patientAllergys = $event.data"
              />
              <!-- <a-textarea v-model:value="filesInfo.brxx.brGms" :rows="1" placeholder="请输入" @click="allergicOpen = true" /> -->
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center pr-4">
          <div>
            <BaseTitle title="费用信息" />
            <div class="pl-2">押金金额: ￥{{ filesInfo.dpJe || '-' }}</div>
          </div>
          <a-button danger @click="onClose">关闭</a-button>
        </div>
      </div>
    </template>
    <span class="cursor-pointer"><slot></slot></span>
    <Edit v-model:open="editOpen" title="修改登记信息" :row-data="{ ...filesInfo }" @success="onSuccess" />
    <Allergic v-model:open="allergicOpen" :row-data="filesInfo.brGms" @success="onAllergic" />
  </a-popover>
</template>

<script setup>
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { EditOutlined } from '@ant-design/icons-vue'
import Edit from '@/components/InpatientInfo'
import LabelValue from '@/components/LabelValue'
// import patientList from './popoverLabel.js'
import { post } from '@/utils/request'
import { formatGms } from '@/utils/format.js'
import SelectAllergyModal from '@/components/SelectAllergy'
import useStore from '@/views/in-nurse/bed-card/store.js'
import Allergic from './Allergic.vue'

const store = useStore()

const emit = defineEmits(['change'])
const props = defineProps({
  patientInfo: {
    type: Object,
    description: '病人信息',
    default: () => ({})
  },
  isModify: {
    type: Boolean,
    description: '是否可修改护士',
    default: false
  }
})
const open = ref(false)
const editOpen = ref(false)
const allergicOpen = ref(false)
const putStateInfo = ref(true)
// const putStateInfoBody = ref(true)
const putStateAllergy = ref(true)
const filesInfo = ref({})
const positionList = ref([])
const onActive = () => {
  putStateInfo.value = !putStateInfo.value
  putStateInfo.value && onSaveInfo()
}
const getContainer = () => document.getElementById(`patient-popover-${props.patientInfo.inplsh}`)
//const onActiveBody = () => {
//putStateInfoBody.value = !putStateInfoBody.value
//putStateInfoBody.value && onSaveInfo()
//}
const onActiveAllergy = () => {
  putStateAllergy.value = !putStateAllergy.value
  putStateAllergy.value && onSaveInfo()
}

//获取部位集合
const getPositionList = async () => {
  const { code, data } = await post('/operation/opex/getDictPartList', {
    zjm: '',
    pageNum: 1,
    pageSize: 999
  })
  if (code !== 0) return
  positionList.value = data.map((item) => {
    return {
      value: item.id,
      label: item.partName
    }
  })
}

const getPatientInfo = async () => {
  putStateInfo.value = true
  putStateAllergy.value = true
  // putStateInfoBody.value = true
  const params = {
    inplsh: props.patientInfo.inplsh
  }
  store.tabsKey === 30 && (params.tyOperate = true)
  const { code, data, msg } = await post('/inp/zydj/getInpRecordInfo', params)
  if (code !== 0) return message.error(msg)
  filesInfo.value = { ...data }
}
const onSaveInfo = async () => {
  filesInfo.value.brxx.brGms = filesInfo.value.brGms
  filesInfo.value.brxx.patientAllergys = filesInfo.value.patientAllergys
  const { code, msg } = await post(
    '/inp/zydj/doSaveInpAdmission',
    {
      inpRecordInfol: filesInfo.value,
      patientInfo: filesInfo.value.brxx
    },
    { loading: true }
  )
  if (code !== 0) return message.error(msg)
  message.success(msg)
  getPatientInfo()
}
const onSelect = (select, key) => {
  filesInfo.value[key + 'Name'] = select.empName
  filesInfo.value[key] = select.empId
}
// const onChangeArea = (val) => {
//   filesInfo.value.lastWardId = val
// }
const onAllergic = (item) => {
  filesInfo.value.brGms = ''
  item.forEach((e) => {
    if (e.gms === '有') {
      filesInfo.value.brGms += e.dictItemName + ':' + e.gms + ','
    }
  })
}

const onClose = () => {
  // emit('update:open', false)
  open.value = false
}

const onEditInfo = () => {
  editOpen.value = true
}

const onSuccess = () => {
  emit('change')
  getPatientInfo()
}

watch(open, (val) => {
  val && getPositionList() && getPatientInfo()
})
</script>
<style lang="less" scoped>
.info-box {
  @apply p-2 flex flex-wrap overflow-auto overflow-x-hidden;
}
.info {
  @apply flex mr-7 h-8 mb-2 items-center;
}
</style>
